<template>
	<view class="box">
	<view class="search">
		<u-search @clear="clear" color="#000"  placeholderColor="#8D8D8D" searchIconColor="#000" @change="change" placeholder="找工作" v-model="keyword" :showAction="false"></u-search>
	</view>
	<view class="box_body">
		<view class="body_item" @click="todetail(item._id)" v-for="item in infolist" :key="item._id">
			<u-icon name="search" color="#000" size="28"></u-icon>
			<text class="title">{{item.criticism_title}}</text>
		</view>
	</view>
	<u-loadmore v-if="islodaing" :status="status" />
	</view>
</template>

<script>
	const db=uniCloud.database()
	const  cmd=db.command
	export default {
		data() {
			return {
				status:"loading",
				islodaing:false,
				keyword:'',
				infolist:[],
				timer:null
			};
		},
		methods:{
			clear(){
				this.islodaing=false
				this.infolist=[]
				console.log('ss')
			},
			//去详情页
			todetail(id){
				uni.navigateTo({
					url:`/pages-other/workInfo/workInfo?id=${id}`
				})
			},
			change(e) {
				this.islodaing=true
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					console.log(e)
					this.searchs(e)
			
				}, 500)
			},
			async searchs(e) {
				if (e.trim() == "") {
						this.islodaing=false
					this.infolist=[]
					return;
				}
				const text = new RegExp(e, 'g')
				
				await db.collection("recruitment").where(
					cmd.or({
						criticism_title: text
					})
				).get().then(res => {
					if(res.result.data.length==0){
						this.status='nomore'
						
					}else{
						this.infolist=[]
						this.islodaing=false
					}
					console.log(res, '索索')
					
					this.infolist=res.result.data
				})
			}
		}
	}
</script>

<style lang="scss">
.box{
	.search{
		margin-top: 10rpx;
	}
	.box_body {
		margin-top: 20rpx;
	
		.body_item {
			padding: 10rpx;
			border-bottom: 1px solid #eee;
			display: flex;
			align-items: center;
			.title{
				margin-left: 20rpx;
				color:#000;
				font-size: 30rpx;
				font-family: '楷体';
				font-weight: 500;
			}
		}
	}
}
</style>
<style scoped>
	page {
		background-color: #A2D9CE;
	}
</style>
